<template >
  <div>
    <brand></brand>
    <el-card>
      <el-card class="Hys_card">
        <!-- 点击添加用户弹出模态框 然后给这个按钮绑定个事件 将这个事件设置为ture  之后在data里定义数据对象
        更改组件里面的内容-->
        <el-button type="success">添加用户</el-button>
        <el-table :data="userList" border style="width: 100%">
          <el-table-column label="#" width="80">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" width="140"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="mobile" label="电话"></el-table-column>
          <el-table-column prop="role_name" label="角色"></el-table-column>
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.mg_state"
                active-color="#13ce66"
                inactive-color="#ccc"
                @change="changeState(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="remove(scope.row.id)"
              ></el-button>
              <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>
<script>
import brand from "../Bread";
export default {
  components: {
    brand,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
</style>